import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'animate.css'
import { startTokenRefresh, isTokenExpired } from './utils/tokenUtils'
import { addDebugCommands } from './utils/debugUtils'
import { useUserStore } from './stores/user'
import { enhanceRouterWithFix, fixRouteOnRefresh } from './utils/routeFix'
import webSocketManager from './utils/websocket'

const app = createApp(App)
const pinia = createPinia()

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(pinia)
app.use(router)
app.use(ElementPlus)

// 启用路由修复功能
enhanceRouterWithFix()

// 初始化应用的异步函数
async function initializeApp() {
  const userStore = useUserStore()
  const token = localStorage.getItem('token')

  // 检查token是否有效
  if (!token || isTokenExpired(token)) {
    console.log('Token无效或不存在，跳过权限预加载')
    userStore.setInitialized(true)
    return
  }

  try {
    // 同步用户状态
    const success = userStore.syncFromStorage()
    if (!success) {
      console.log('用户状态同步失败，跳过权限预加载')
      userStore.setInitialized(true)
      return
    }

    console.log('开始预加载用户权限和动态路由...')

    // 动态导入相关模块
    const [
      { getUserInfo },
      { setUserPermissions },
      { addDynamicRoutes }
    ] = await Promise.all([
      import('./api/auth'),
      import('./stores/permission'),
      import('./router')
    ])

    // 获取用户权限信息
    const response = await getUserInfo()
    console.log('获取用户权限信息成功:', response.data)

    if (response.data && response.data.menus) {
      // 设置权限数据
      setUserPermissions(
        response.data.buttons || [],
        response.data.menus || [],
        response.data
      )

      // 预加载动态路由
      await addDynamicRoutes(response.data.menus)
      console.log('动态路由预加载完成')

      // 启动token自动刷新
      startTokenRefresh()

      // 启动WebSocket连接（异步，不阻塞应用启动）
      webSocketManager.connect(token).then(() => {
        console.log('WebSocket连接已建立')
      }).catch(error => {
        console.error('WebSocket连接失败:', error)
      })
    }

    userStore.setInitialized(true)
    console.log('应用初始化完成')

    // 检查并修复当前路由（处理刷新404问题）
    await fixRouteOnRefresh()

  } catch (error) {
    console.error('应用初始化失败:', error)
    
    // 如果是认证错误，清除用户状态
    if (error.response && (error.response.status === 401 || error.response.status === 403)) {
      console.log('认证失败，清除用户状态')
      userStore.logout()
    }
    
    userStore.setInitialized(true)
  }
}

// 启动应用初始化
initializeApp().then(() => {
  console.log('应用预初始化完成，开始挂载应用')
}).catch(error => {
  console.error('应用预初始化失败:', error)
}).finally(() => {
  // 无论初始化是否成功，都要挂载应用
  app.mount('#app')
})

// 添加调试命令（仅在开发环境）
if (import.meta.env.DEV) {
  addDebugCommands()

  // 添加状态管理调试工具
  import('./utils/stateDebug.js').then(({ addStateDebugCommands }) => {
    addStateDebugCommands()
  }).catch(error => {
    console.error('状态调试工具加载失败:', error)
  })

  // 添加路由调试工具
  import('./utils/routeDebug.js').then(({ addRouteDebugCommands, setupRouteWatcher }) => {
    addRouteDebugCommands()
    setupRouteWatcher()
  }).catch(error => {
    console.error('路由调试工具加载失败:', error)
  })
}